<template>
  <div class="outer">
    <div class="inner">
      <div class="logo">
        <img src="../assets/logo.png" alt="" />
      </div>
    </div>
    <div class="inner innerSearch">
      <div class="search">
        <ul>
          <li
            v-for="item in tabList"
            :key="item.id"
            :class="activeIndex == item.id ? 'active' : ''"
            @click="getPage(item)"
          >
            {{ item.label }}
          </li>
        </ul>
        <div class="content">
          <el-input
            v-model="searchValue"
            :placeholder="placeName"
            class="searchValue"
            @keyup.enter.native="goSearch"
            autofocus
            clearable
          ></el-input>
          <div class="searchBtn" @click="goSearch">Enter</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import localData from '../utils/localData.js'
export default {
  data () {
    return {
      activeIndex: '1',
      searchValue: '',
      placeName: '百度一下',
      tabList: localData.tabList
    }
  },
  methods: {
    getPage (item) {
      this.activeIndex = item.id
      if (parseInt(item.id) === 1) {
        this.placeName = item.label + '一下'
      } else {
        this.placeName = item.label + '搜索'
      }
    },
    goSearch () {
      const url = this.tabList.find((item) => { return item.id === this.activeIndex })
      window.open(url.location + this.searchValue, '_blank')
    },
    handleClick (tab, event) {
      console.log(tab, event)
    }
  }
}
</script>

<style lang="less" scoped>
/*定义颜色*/
@link-color:#409EFF; // sea blue
@link-color-hover:#66B1FF;
.active {
  border-bottom: 2px solid @link-color !important;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  color: @link-color !important;
  transition: all 0.2s ease-in;
}
.outer {
  width: 100%;
  .inner {
    display: flex;
    justify-content: center;
    margin-top: 30px;
    .logo {
      width: 200px;
      height: 100px;
      > img {
        width: 100%;
        height: 100%;
      }
    }
  }
  .innerSearch {
    margin-top: 10px;
    .search {
      > ul {
        display: flex;
        justify-content: space-between;
        width: 450px;
        // border-bottom: 1px solid #ddd;
        padding-left: 0;
        margin: 14px 0;
        > li {
          width: 45px;
          height: 32px;
          text-align: center;
          list-style: none;
          cursor: pointer;
          color: #707070;
          font-weight: 700;
          border-bottom: 2px solid rgba(0,0,0,0);
        }
      }
      .content {
        height: 42px;
        display: flex;
        .searchValue {
          width: 455px;
        }
        .searchBtn {
          width: 75px;
          background-color: #409EFF;
          font-weight: 700;
          color: #fff;
          line-height: 42px;
          text-align: center;
          border-radius: 5px;
          margin-left: 20px;
          cursor: pointer;
          &:hover {
              background-color: #66B1FF;
          }
        }
      }
    }
  }
}
</style>>
